<template>
  <transition
    enter-active-class="transition ease-out duration-300"
    enter-from-class="transform opacity-0 scale-95"
    enter-to-class="transform opacity-100 scale-100"
    leave-active-class="transition ease-in duration-200"
    leave-from-class="transform opacity-100 scale-100"
    leave-to-class="transform opacity-0 scale-95"
  >
    <div v-if="show" :class="type !== 'error' ? 'bg-green-500' : 'bg-red-500'" class="fixed top-12 left-1/2 transform -translate-x-1/2  text-white px-4 py-2 rounded shadow-lg">
      {{ message }}
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createEventBus } from '@/composables/eventBus'

const { emit, on } = createEventBus()

const show = ref(false)
const message = ref('')
const type = ref('error')

onMounted(() => {
  on('show-notification', (data) => {
    console.log(data)
    message.value = data.message
    show.value = true
    type.value = data.type || 'error'
    setTimeout(() => {
      show.value = false
    }, 3000)
  })
})

onUnmounted(() => {
  on.removeAllListeners()
})
</script>

<style scoped lang="stylus">
.bg-green-500 {
  background-color: rgb(34 197 94);
}
</style>